<template>
     <z-paging ref="paging" v-model="dataList" default-page-size="15"  @query="queryList" safe-area-inset-bottom>
    		<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    		<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
        <view class="tab" slot="top">
          <view class="title" :class="{active:index==clickIndex}"  v-for="(item,index) in titleList" :key="item.id" @click="onClick(index)">
            {{item.name}}
          </view>
        </view>
        
       <!-- 循环的数据 -->
        <view class="newList">
           <view class="new-item" v-for="item in dataList" :key="item.id">
           {{item.title}}
           </view>
            </view>
            
              
        </z-paging>
  
</template>

<script>
  export default {
    data() {
      return {
        dataList:[],
        titleList:[
          {id:1,name:"我的邀请"},
          {id:2,name:"我的推荐"}
        ],
        clickIndex:0
      };
    },
    methods:{
      onClick(index){
        this.clickIndex=index
        this.$refs.paging.reload()
      },
      queryList(pageNo, pageSize){
        uni.request({
          url:"https://tea.qingnian8.com/api/qingnews/newslist",
          data:{
            num:pageSize,
            page:pageNo
          },
          header:{
          		'access-key':"808503"
          	},
        }).then(res=>{
          console.log(res);
          this.$refs.paging.complete(res[1].data.data);
          // this.$refs.paging.complete([]);
         
        
        }).catch(err=>{
          this.$refs.paging.complete(false);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.newList{
  padding: 0 30rpx;
  .new-item{
    margin-bottom: 50rpx ;
  }
}
 .tab{
      // height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 40rpx;
      padding: 50rpx 30rpx ;
      .title{
        padding: 10rpx;
      }
      
    }
    .active{
      position: relative;
      &::after{
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 5rpx;
        left: 0;
        bottom: 0;
        background-color: red;
       
      }
    }
</style>
